<template>
	<div>
		<el-card class="!border-none p-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				基础信息
			</div>
			<div class="main-color mt-[30px]">
				<el-row >
					<el-col :span="6">
						<div class="flex-col">
							<span class="mb-[10px]">PI号</span>
							<el-input placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class="mb-[10px]">提单号</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class="mb-[10px]">开船时间</span>
							<el-select placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px]">
							<span class="mb-[10px]">到港日期</span>
							<el-select placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col mt-[30px]">
							<span class="mb-[10px]">船公司</span>
							<el-input placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">航次</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">目的港</span>
							<el-input placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">代理联系方式</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col mt-[30px]">
							<span class="mb-[10px]">公司名称</span>
							<el-input placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">电话</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">邮箱</span>
							<el-input placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">地址</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col mt-[30px]">
							<span class="mb-[10px]">实际重量</span>
							<el-input placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">实际方数</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">单价</span>
							<el-input placeholder="请输入"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="flex-col ml-[30px] mt-[30px]">
							<span class="mb-[10px]">进仓费</span>
							<el-input  placeholder="请输入"></el-input>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]">
				<router-link :to="{
						path: getRoutePath('dealOrder.dealOrder/document')
				    }">
					<span>取消</span>
				</router-link>
			</el-button>
			<el-button class="w-[100px] bg-[#0054A6] h-[36px]" type="primary">提交</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const options = ref<Array<any>>([
		{
			value: '选项1',
			label: '黄金糕'
		}, {
			value: '选项2',
			label: '双皮奶'
		},
	])
</script>


<style scoped>
	.flex-col{
		display: flex;
		flex-direction: column;
	}
</style>